<template>
  <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 4px;">
    <el-tag v-for="lang in displayedLanguages" :key="lang" :type="tagType || undefined" size="small">{{ lang }}</el-tag>
    <el-tooltip v-if="hiddenLanguages.length > 0" placement="top">
      <template #content>
        <div style="max-width: 400px; display: flex; flex-wrap: wrap; gap: 4px;">
          <el-tag v-for="lang in hiddenLanguages" :key="lang" :type="tagType || undefined" size="small">{{ lang }}</el-tag>
        </div>
      </template>
      <el-tag size="small" style="cursor: pointer;">+{{ hiddenLanguages.length }}</el-tag>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ElTag, ElTooltip } from 'element-plus';

type TagType = '' | 'success' | 'info' | 'warning' | 'danger';

const props = defineProps({
  languages: {
    type: Array as () => string[],
    required: true,
  },
  limit: {
    type: Number,
    default: 10,
  },
  tagType: {
    type: String as () => TagType,
    default: '',
  }
});

const displayedLanguages = computed(() => props.languages.slice(0, props.limit));
const hiddenLanguages = computed(() => props.languages.slice(props.limit));
</script> 